<template>
  <view class="template-protocol">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
    </tn-nav-bar>
    
    <view class="protocol-content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="title tn-text-center">充值服务协议</view>
      
      <view class="section">
        <view class="section-title">一、协议的范围</view>
        <view class="section-content">
          <view class="item">1.1 本协议是用户（以下简称"您"）与本平台就充值服务等相关事项所订立的有效合约。</view>
          <view class="item">1.2 在您充值或使用本平台充值服务前，请您仔细阅读本协议，如您不同意本协议的任何内容，请勿进行充值。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">二、充值说明</view>
        <view class="section-content">
          <view class="item">2.1 充值比例：1元人民币=1欢币。</view>
          <view class="item">2.2 充值金额将实时充入您的账户，可用于平台内消费。</view>
          <view class="item">2.3 赠送金额仅限平台内使用，不可提现。</view>
          <view class="item">2.4 本平台可能不定期推出充值优惠活动，具体规则以活动公告为准。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">三、充值限制</view>
        <view class="section-content">
          <view class="item">3.1 为确保交易安全，本平台可能会对单次充值金额设置上下限。</view>
          <view class="item">3.2 如发现异常充值行为，本平台有权暂停相关账户的充值功能。</view>
          <view class="item">3.3 未成年人充值受到国家相关法律法规的限制。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">四、资金安全</view>
        <view class="section-content">
          <view class="item">4.1 本平台采用行业标准的安全技术保护您的充值过程。</view>
          <view class="item">4.2 请您在充值时使用安全的网络环境，并确保账号安全。</view>
          <view class="item">4.3 如发现账户异常，请立即联系客服处理。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">五、退款规则</view>
        <view class="section-content">
          <view class="item">5.1 充值金额一经充入账户即不可退款。</view>
          <view class="item">5.2 如遇特殊情况需要退款，请联系客服并说明具体原因。</view>
          <view class="item">5.3 赠送金额不予退还。</view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">六、其他规定</view>
        <view class="section-content">
          <view class="item">6.1 本平台保留在法律法规允许的范围内修改本协议的权利。</view>
          <view class="item">6.2 本协议的解释权归本平台所有。</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'rechargeProtocol',
  computed: {
    vuex_custom_bar_height() {
      return uni.getSystemInfoSync().statusBarHeight + 45
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.template-protocol {
  min-height: 100vh;
  background-color: #FFFFFF;
}

.protocol-content {
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
  }
  
  .section {
    margin-bottom: 40rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #333;
    }
    
    .section-content {
      .item {
        font-size: 28rpx;
        color: #666;
        line-height: 1.8;
        margin-bottom: 16rpx;
        text-align: justify;
      }
    }
  }
}

/* 导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 30rpx;
  
  .icon {
    font-size: 46rpx;
    color: #000000;
    
    &:active {
      transform: scale(0.92);
    }
  }
}
</style> 